<template>
    <div>
        <MainHead searchDescribe="请输入" @searchChange="getSearchValue" namespace @namespaceChange="getNamespaceValue"
      @namespaceList="getNamespaceList" @dataList="getData" add @addFunc="handleAdd" />
      <el-card shadow="never" class="border-0">
      <!-- 新增|刷新 -->
      <div class="flex items-center justify-between mb-4">
        <el-button type="primary" size="small" @click="handleCreate">新增</el-button>
        <el-tooltip effect="dark" content="刷新数据" placement="top">
          <el-button text @click="getData">
            <el-icon :size="20">
              <Refresh />
            </el-icon>
          </el-button>
        </el-tooltip>
      </div>

      <el-table :data="tableData" stripe style="width: 100%" v-loading="loading">
        <template v-for="(column,ii) in columns" :key="ii">

          <el-table-column v-if="column.dataIndex === 'name'" prop="metadata.name" :label="column.title">
          </el-table-column>
          <el-table-column v-if="column.dataIndex === 'labels'" prop="metadata.labels" :label="column.title">
            <template v-slot="{ row }">
              <!-- 遍历数组并显示每个元素 -->
              <div v-for="(item, index) in row.metadata.labels" :key="index">
                {{ item }}
              </div>
            </template>
          </el-table-column>

          <el-table-column v-if="column.dataIndex === 'image'" :prop="column.title" :label="column.title">
            <template v-slot="{ row }">
              <!-- 遍历数组并显示每个元素 -->
              <div v-for="(item, index) in row.spec.template.spec.containers" :key="index">
                {{ item.image }}
              </div>
            </template>
          </el-table-column>
          <el-table-column v-if="column.dataIndex === 'containers'" :prop="column.title" :label="column.title">
            <template v-slot="{ row }">
              <span style="font-weight:bold;">{{ row.status.availableReplicas > 0 ? row.status.availableReplicas : 0
              }} / {{ row.spec.replicas > 0 ? row.spec.replicas: 0 }}</span>
            </template>
          </el-table-column>
        </template>

        <!-- 操作按钮 -->
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-button type="primary" size="small" text @click="showEditModal(scope.row)">YAML</el-button>
            <el-button type="primary" size="small" text @click="handleScale(scope.row)">扩容</el-button>
            <el-popconfirm title="确认重启? " confirmButtonText="确认" cancelButtonText="取消"
              @confirm="restartDeployment(scope.row.metadata.name)">
              <template #reference>
                <el-button text type="warning" size="small">重启</el-button>
              </template>
            </el-popconfirm>
            <el-popconfirm title="确认删除? " confirmButtonText="确认" cancelButtonText="取消"
              @confirm="handleDelete(scope.row.metadata.name)">
              <template #reference>
                <el-button text type="warning" size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>


      <div class="flex items-center justify-center mt-5">
        <el-pagination background layout="prev, pager ,next" :total="total" :current-page="currentPage"
          :page-size="limit" @current-change="getData" />
      </div>

      <!-- 抽屉表单 -->
      <FormDrawer ref="formDrawerRef" :title="drawerTitle" @submit="handleSubmit">
        <el-form :model="form" ref="formRef" :rules="rules" label-width="80px" :inline="false">
          <el-form-item label="镜像名称" prop="image">
            <el-input v-model="form.title" placeholder="镜像名称"></el-input>
          </el-form-item>
          <el-form-item label="标签名称" prop="labels">
            <el-input v-model="form.content" placeholder="标签名称" type="textarea" :rows="5"></el-input>
          </el-form-item>
        </el-form>
      </FormDrawer>
    </el-card>

    </div>
</template>


<script setup>
    // 导入包
    import { ref,reactive,computed } from "vue"
    import MainHead from "~/components/MainHead.vue";
    import {
        getStatefulsetsApi,
        scaleStatefulsetApi,
        updateStatefulsetApi,
        deleteStatefulsetApi,
        StatefulsetDetailApi,
        restartStatefulsetApi
    } from "~/api/statefulset"
    import {
        getCluster,
    } from '~/composables/clustersList'
    import FormDrawer from "~/components/FormDrawer.vue";

    // 定义常量
    const loading = ref(false)
    const searchValue = ref('')
    const namespaceValue = ref('')
    const namespaceList = ref([])
    const currentPage = ref(1)
    const total = ref(0)
    const limit = ref(10)
    // 定义data
    const statefulsetListData = reactive({
                params: {
                    filter_name: '',
                    namespace: '',
                    cluster: '',
                    page: 1,
                    limit: 10
                }
            })
    // 定义detailData
    // const statefulsetDetailData =  reactive({
    //     params: {
    //         statefulset_name: '',
    //         namespace: '',
    //         cluster: ''
    //     }
    // })

    // 新增
    const handleCreate = ()=>{
        editId.value = 0
        resetForm({
            image:"",
            labels:""
        })
        formDrawerRef.value.open()
    }
    const tableData = ref([])
    //表结构
    const columns = ref([
        {
        title: '名称',
        dataIndex: 'name'
        },
        {
        title: '标签',
        dataIndex: 'labels'
        },
        {
        title: '容器组',
        dataIndex: 'containers',
        },
        {
        title: '镜像',
        dataIndex: 'image'
        },
        {
        title: '创建时间',
        dataIndex: 'creationTimestamp'
        },
    ])
    // 分页
    const pagination = reactive({
        showSizeChanger: true,
        showQuickJumper: true,
        total: 0,
        currentPage: 1,
        pagesize: 10,
        pageSizeOptions: ["10", "20", "50", "100"],
        showTotal: total => `共 ${total} 条`
    })


    // 函数
    function getSearchValue(val) {
        searchValue.value = val
    }
    function getNamespaceValue(val) {
        namespaceValue.value = val
    }
    function getNamespaceList(val) {
      namespaceList.value = val
    }

   // 获取数据
   function getData(){
    statefulsetListData.params.filter_name = searchValue.value
    statefulsetListData.params.page = currentPage.value
    statefulsetListData.params.cluster = getCluster()
    statefulsetListData.params.namespace = namespaceValue.value
    statefulsetListData.params.limit = pagination.pagesize
      loading.value = true
      const statefulsetParams = {params: statefulsetListData.params}
      getStatefulsetsApi(statefulsetParams)
      .then(res=>{
          tableData.value = res.items
          total.value = res.total
      })
      .catch(res => {
          toast(res || 'An error occurred' , "error")
      })
      .finally(()=>{
          loading.value = false
      })
  }

  getData()

</script>